<template>
	<view class="container">
		<view class="page-header">
			<view class="page-title">表单组件展示</view>
			<view class="page-subtitle">多种表单控件的使用示例</view>
		</view>
		
		<form @submit="formSubmit" @reset="formReset" class="form-container">
			<!-- Switch 开关 -->
			<view class="form-item">
				<view class="form-label">Switch 开关</view>
				<view class="form-control">
					<switch name="switch" class="custom-switch"></switch>
				</view>
			</view>

			<!-- Radio 单选 -->
			<view class="form-item">
				<view class="form-label">Radio 单选</view>
				<view class="form-control">
					<radio-group name="radio" class="radio-group">
						<label class="radio-item">
							<radio value="radio1" class="custom-radio"></radio>
							<text class="radio-text">选项一</text>
						</label>
						<label class="radio-item">
							<radio value="radio2" class="custom-radio"></radio>
							<text class="radio-text">选项二</text>
						</label>
					</radio-group>
				</view>
			</view>

			<!-- Checkbox 多选 -->
			<view class="form-item">
				<view class="form-label">Checkbox 多选</view>
				<view class="form-control">
					<checkbox-group name="checkbox" class="checkbox-group">
						<label class="checkbox-item">
							<checkbox value="checkbox1" class="custom-checkbox"></checkbox>
							<text class="checkbox-text">选项一</text>
						</label>
						<label class="checkbox-item">
							<checkbox value="checkbox2" class="custom-checkbox"></checkbox>
							<text class="checkbox-text">选项二</text>
						</label>
					</checkbox-group>
				</view>
			</view>

			<!-- Slider 滑块 -->
			<view class="form-item">
				<view class="form-label">Slider 滑块</view>
				<view class="form-control">
					<slider value="50" name="slider" show-value 
							class="custom-slider"
							activeColor="#007AFF"
							backgroundColor="#e9ecef"
							block-color="#007AFF"></slider>
				</view>
			</view>

			<!-- Input 输入框 -->
			<view class="form-item">
				<view class="form-label">Input 输入框</view>
				<view class="form-control">
					<input class="custom-input" name="input" placeholder="请输入内容"/>
				</view>
			</view>

			<!-- 按钮组 -->
			<view class="button-group">
				<button form-type="submit" class="submit-btn">提交表单</button>
				<button type="default" form-type="reset" class="reset-btn">重置表单</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件,携带数据为: ' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				uni.showModal({
					content: '表单数据内容: ' + JSON.stringify(formdata),
					showCancel: false
				});
			},
			formReset: function(e) {
				console.log('清空数据')
				uni.showToast({
					title: '表单已重置',
					icon: 'success'
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
		background: #f8f9fa;
		min-height: 100vh;
	}
	
	.page-header {
		text-align: center;
		margin-bottom: 50rpx;
		padding: 30rpx 0;
	}
	
	.page-title {
		font-size: 40rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 12rpx;
	}
	
	.page-subtitle {
		font-size: 26rpx;
		color: #666;
	}
	
	.form-container {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}
	
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f1f2f6;
	}
	
	.form-item:last-child {
		border-bottom: none;
	}
	
	.form-label {
		font-size: 30rpx;
		font-weight: 500;
		color: #2c3e50;
		flex: 1;
	}
	
	.form-control {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	
	.custom-switch {
		transform: scale(1.1);
	}
	
	.radio-group, .checkbox-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.radio-item, .checkbox-item {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}
	
	.custom-radio, .custom-checkbox {
		transform: scale(1.1);
	}
	
	.radio-text, .checkbox-text {
		font-size: 28rpx;
		color: #555;
	}
	
	.custom-slider {
		width: 100%;
	}
	
	.custom-input {
		width: 100%;
		height: 80rpx;
		padding: 0 24rpx;
		border: 2rpx solid #e1e5e9;
		border-radius: 12rpx;
		font-size: 28rpx;
		background: #fff;
		transition: all 0.3s ease;
	}
	
	.custom-input:focus {
		border-color: #007AFF;
		background: #f8faff;
	}
	
	.button-group {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}
	
	.submit-btn {
		flex: 1;
		background: #007AFF;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		font-size: 30rpx;
		font-weight: 500;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.reset-btn {
		flex: 1;
		background: #f8f9fa;
		color: #666;
		border: 2rpx solid #e1e5e9;
		border-radius: 12rpx;
		font-size: 30rpx;
		font-weight: 500;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.container {
			padding: 20rpx;
		}
		
		.form-container {
			padding: 30rpx 20rpx;
		}
		
		.form-item {
			flex-direction: column;
			align-items: flex-start;
			gap: 20rpx;
		}
		
		.form-control {
			width: 100%;
			justify-content: flex-start;
		}
		
		.button-group {
			flex-direction: column;
		}
	}
</style>